import classNames from "classnames";
import style from "./index.module.scss";
import { options } from "@/app/utils";

function Index({ active }) {
  return (
    <dl className={style.menu}>
      <dt className={style.menuItem}>
        <svg
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          width="22"
          height="22"
        >
          <path
            d="M384.948148 487.348148H185.837037c-53.096296 0-94.814815-41.718519-94.814815-94.814815V195.318519c0-53.096296 41.718519-94.814815 94.814815-94.814815h199.111111c53.096296 0 94.814815 41.718519 94.814815 94.814815v199.111111c0 51.2-43.614815 92.918519-94.814815 92.918518zM185.837037 176.355556c-9.481481 0-18.962963 9.481481-18.962963 18.962963v199.111111c0 9.481481 9.481481 18.962963 18.962963 18.962963h199.111111c9.481481 0 18.962963-9.481481 18.962963-18.962963V195.318519c0-9.481481-9.481481-18.962963-18.962963-18.962963H185.837037zM819.2 487.348148H621.985185c-53.096296 0-94.814815-41.718519-94.814815-94.814815V195.318519c0-53.096296 41.718519-94.814815 94.814815-94.814815h199.111111c53.096296 0 94.814815 41.718519 94.814815 94.814815v199.111111c-1.896296 51.2-43.614815 92.918519-96.711111 92.918518zM621.985185 176.355556c-9.481481 0-18.962963 9.481481-18.962963 18.962963v199.111111c0 9.481481 9.481481 18.962963 18.962963 18.962963h199.111111c9.481481 0 18.962963-9.481481 18.962963-18.962963V195.318519c0-9.481481-9.481481-18.962963-18.962963-18.962963H621.985185zM384.948148 923.496296H185.837037c-53.096296 0-94.814815-41.718519-94.814815-94.814815V629.57037c0-53.096296 41.718519-94.814815 94.814815-94.814814h199.111111c53.096296 0 94.814815 41.718519 94.814815 94.814814v199.111111c0 53.096296-43.614815 94.814815-94.814815 94.814815zM185.837037 610.607407c-9.481481 0-18.962963 9.481481-18.962963 18.962963v199.111111c0 9.481481 9.481481 18.962963 18.962963 18.962963h199.111111c9.481481 0 18.962963-9.481481 18.962963-18.962963V629.57037c0-9.481481-9.481481-18.962963-18.962963-18.962963H185.837037zM819.2 923.496296H621.985185c-53.096296 0-94.814815-41.718519-94.814815-94.814815V629.57037c0-53.096296 41.718519-94.814815 94.814815-94.814814h199.111111c53.096296 0 94.814815 41.718519 94.814815 94.814814v199.111111c-1.896296 53.096296-43.614815 94.814815-96.711111 94.814815zM621.985185 610.607407c-9.481481 0-18.962963 9.481481-18.962963 18.962963v199.111111c0 9.481481 9.481481 18.962963 18.962963 18.962963h199.111111c9.481481 0 18.962963-9.481481 18.962963-18.962963V629.57037c0-9.481481-9.481481-18.962963-18.962963-18.962963H621.985185z"
            fill="#5659fe"
          ></path>
        </svg>
        模板风格
      </dt>
      <dd className={style.menuItemWraper}>
        {options.map((m) => {
          return (
            <div
              key={m.value}
              className={classNames(
                style.subMenuItem,
                active === m.type ? style.active : ""
              )}
            >
              <a href={`/muban/${m.type}`} className={style.name}>
                {m.label}
              </a>
            </div>
          );
        })}
      </dd>
    </dl>
  );
}

export default Index;
